<template>
    <pos-dialog title="" :visible="visible" @close="close">
        <div class="order-infos">
            <div class="order-info order-info__number">Order #{{ order.number }}</div>
            <div class="order-info order-info__customer">
                <div>
                    <span>Paid via {{ order.payment_method_title }} on {{ $dayjs(order.date_paid).format('DD/MM/YYYY HH:mm') }}</span>
                    <span>-</span>
                    <span class="text-secondary text-capitalize">{{ order.status }}</span>
                </div>
                <div>Customer {{ order.customer_user_agent || 'Guest' }}</div>
            </div>
        </div>
        <div class="order-items" v-if="order.line_items">
            <div class="order-item" v-for="(item,index) in order.line_items" :key="index">
                <div class="order-item__row">
                    <img :src="$imageSrc(item.image.src)" alt="" class="order-item__image">
                    <div class="order-item__name">{{ item.name }}</div>
                    <div class="order-item__price">
                        {{ item.quantity }} x {{ '€' + $toAmount(item.price) }}
                    </div>
                    <div class="order-item__total">€{{ item.total }}</div>
                </div>
            </div>
        </div>

        <div class="order-totals">
            <div class="order-total" v-for="(f,index) in order.fee_lines" :key="index">
                <div class="order-total__label">FEE - {{ f.name }}</div>
                <div class="order-total__price">€{{ f.total }}</div>
            </div>
            <div class="order-total" v-for="(s,index) in order.shipping_lines" :key="index">
                <div class="order-total__label">SHIPPING - {{ s.method_title }}</div>
                <div class="order-total__price">€{{ s.total }}</div>
            </div>
            <div class="order-total">
                <div class="order-total__label">Discount</div>
                <div class="order-total__price text-citrus">-€{{ order.discount_total }}</div>
            </div>
        </div>

        <div class="order-totals">
            <div class="order-total order-total-total">
                <div class="order-total__label">Total</div>
                <div class="order-total__price">€{{ order.total }}</div>
            </div>
            <div class="order-total">
                <div class="order-total__label">{{ order.payment_method_title }}</div>
                <div class="order-total__price">€{{ order.total }}</div>
            </div>
        </div>

        <div class="order-notes" v-if="order.customer_note">
            <h5 class="text-uppercase">Note</h5>
            <p>{{ order.customer_note }}</p>
        </div>

        <div class="gzdsx-pos-dialog__footer" slot="footer">
            <button class="btn btn-primary" @click="printOrder">PRINT RECEIPT</button>
        </div>
    </pos-dialog>
</template>

<script>
export default {
    name: "DialogOrder",
    props: {
        value: false,
        order: {
            type: Object,
            default() {
                return {};
            }
        }
    },
    data() {
        return {
            visible: false
        }
    },
    watch: {
        value(val) {
            if (val !== this.visible) {
                this.visible = val;
            }
        }
    },
    methods: {
        close() {
            this.$emit('input', false);
        },
        printOrder(){

        }
    },
    created() {
        this.visible = this.value;
    },
    mounted() {

    }
}
</script>

<style scoped>

</style>